<title>通知列表</title>

<div class="layui-fluid">
  <div class="layui-row layui-col-space12">
    <div class="layui-col-md12">

      <button class="layui-btn LAY_notify_back">
        <i class="layui-icon layui-icon-return layuiadmin-button-btn"></i>
      </button>

      <div id="LAY-notify-view"></div>

      <script id="LAY-notify-tpl" type="text/html">
        
        {{#  if(d.list.length){ }}
        {{#  layui.each(d.list, function(index, item){ }}
        <div class="layui-card">
          <div class="layui-card-body LAY_card_body">

            <div class="layui-row layui-col-space30">
              <div class="layui-col-md12">
                <div class="layui-row">
                  <div class="layui-col-xs9 layui-col-sm9 layui-col-md9 LAY_notify_title" title="{{item.title}}"
                    lay-href="/notify/detail/id={{item.messageId}}">
                    {{#  if(item.isNew){ }}
                    <span class="layui-badge layui-bg-green LAY_badge">未读</span>
                    {{#  } else { }}
                    <span class="layui-badge-rim LAY_badge">已读</span>
                    {{#  } }}
                    {{item.title}}
                  </div>
                  <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 LAY_notify_date">
                    {{item.sentTime ? item.sentTime.split(' ')[0] : ''}}
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
        {{#  }); }}

        <div id="LAY_notify_page" class="LAY_page"></div>
        {{# } else { }}
        <div class="layui-card">
          <div class="LAY_empty">无数据</div>
        </div>
        {{#  } }}
      </script>

    </div>
  </div>
</div>

<script>
  layui.use(['admin', 'laytpl', 'laypage'], function () {
    var $ = layui.$,
      setter = layui.setter,
      laytpl = layui.laytpl,
      laypage = layui.laypage,
      admin = layui.admin;

    var params = {
      page: 1,
      pageSize: 10,
    };

    getList(params);

    function getList(query) {
      admin.req({
        url: setter.url + '/message/myNotifyList',
        type: 'GET',
        data: {
          page: query.page,
          pageSize: query.pageSize
        },
        done: function (res) {
          var data = res.data || {};
          var pageInfo = data.pageInfo || {};
          var getTpl = $('#LAY-notify-tpl').html();

          data.list = data.list || [];

          if (!getTpl) {
            return;
          }

          laytpl(getTpl).render(data, function (html) {
            $('#LAY-notify-view').html(html);

            pagination(pageInfo.currentPage, pageInfo.pageSize, pageInfo.count, function (obj) {
              params = $.extend(true, params, { page: obj.curr, pageSize: obj.limit });
              getList(params);
            });
          });
        }
      });
    }

    $('.LAY_notify_back').off('click').on('click', function () {
      admin.events.back()
    })

    // 分页
    function pagination(curr, limit, count, callback) {
      laypage.render({
        elem: 'LAY_notify_page'
        ,curr: curr
        ,count: count
        ,limit: limit
        ,prev: '<i class="layui-icon layui-icon-left"></i>'
        ,next: '<i class="layui-icon layui-icon-right"></i>'
        ,layout: ['prev', 'page', 'next', 'skip', 'count', 'limit']
        ,jump: function(obj, first){
          if(!first && typeof(callback) === 'function') {
            callback(obj);
          }
        }
      });
    }

  });
</script>